<template>
  <el-upload action="#" list-type="picture-card" :file-list="imgs">
    <template #file="{ file }">
      <el-image
        class="el-upload-list__item-thumbnail"
        :src="file.url"
        :preview-src-list="imgs.map((v) => v.url)"
      >
      </el-image>
      <!-- <span class="el-upload-list__item-actions">
        <span class="el-upload-list__item-preview">
          <i class="el-icon-zoom-in"></i>
        </span>
      </span> -->
    </template>
  </el-upload>
</template>

<script>
export default {
  props: {
    imgs: Array,
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-upload-list--picture-card {
    display: flex;
    flex-wrap: wrap;
  }
  .el-upload--picture-card {
    display: none;
  }
  .el-upload-list__item:nth-last-of-type(-n + 3) {
    margin-bottom: 0;
  }
  .el-upload-list__item {
    transition: none!important;;
  }
}
</style>
